<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.min.js"></script>

</head>
<body>
    <h3 id="title"  demo="wh2107-daydayup" class="one demo" >jQuery 学习 </h3>
    <ul class="list">
        <li>item_01</li>
        <li>item_02</li>
        <li>item_03</li>
        <li>item_04</li>
        <li>item_05</li>
        <li>item_06</li>
        <li>item_07</li>
        <li>item_08 <span> hello </span></li>
        <li>item_09</li>
        <li>item_10</li>
    </ul>
    <!-- <form>
        <input type="button" value="Input Button"/>
        <input type="checkbox" />
    
        <input type="file" />
        <input type="hidden" />
        <input type="image" />
    
        <input type="password" />
        <input type="radio" />
        <input type="reset" />
    
        <input type="submit" />
        <input type="text" />
        <select><option>Option</option></select>
    
        <textarea></textarea>
        <button>Button</button>
    </form> -->
    <p>
        <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> 
        <input type="checkbox" name="newsletter" value="Weekly" />2
        <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />3
    </p>
    <p>
        <select >
            <option value="SZ">深圳</option>
            <option value="WH" selected="selected">武汉</option>
            <option value="HZ">杭州</option>
            <option value="SH">上海</option>
        </select>
    </p>
    <script>
        // 选择器 
        // first 查找第一个 
        // last 查找最后一个 
        // $(".list li:first").css({background:"red"})
        // $(".list li").first().css({background:"red"})
        // $(".list li:last").css({background:"green"})
        // $(".list li").last().css({background:"yellow"})

        // :eq    匹配对应下标的元素
        // :lt    匹配小于对应下标的元素    :lte
        // :gt    匹配大于对应下标的元素
        
        // $(".list li:eq(2)").css({background:"red"})
        //    $(".list li:lt(4)").css({background:"red"})
        // $(".list li:gt(2)").css({background:"red"})

        // :even   匹配对应偶数下标的元素    
        // :odd    匹配对应奇数下标的元素
        // $(".list li:even").css({background:"red"})
        // $(".list li:odd").css({background:"yellow"})

        // :contains()   匹配对应包含文本的元素
        // $(".list li:contains(1)").css({background:"yellow"})

        // :has  匹配对应指定的元素   
        // $(".list li:has(span)").css({background:"yellow"})


        // :input  匹配
        // console.log($("form :input").css({border:'1px solid red'}))
        // :text
        // :password
        // :radio 
        // :checkbox
        // :submit
        // :image
        // :reset
        // :button
        // :file
        // :hidden 

        // $("form :password").css({border:'1px solid red'})
        // $("form :button").css({border:'1px solid red'})

        // :checked   匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
        // $("input:checked").css({color:"red"})  // css 某些input  
        // console.log($("input:checked").val())    

        // :enabled
        // :disabled

        // :selected   
        console.log($("select option:selected").val())


    </script>
</body>
</html>